// 表情包数据，按分类组织
const emojiCategories = {
    '表情': [
        '😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊', 
        '😋', '😎', '😍', '😘', '🥰', '😗', '😙', '😚', '🙂', '🤗', 
        '🤩', '🤔', '🤨', '😐', '😑', '😶', '🙄', '😏', '😣', '😥', 
        '😮', '🤐', '😯', '😪', '😫', '🥱', '😴', '😌', '😛', '😜', 
        '😝', '🤤', '😒', '😓', '😔', '😕', '🙃', '🤑', '😲', '☹️', 
        '🙁', '😖', '😞', '😟', '😤', '😢', '😭', '😦', '😧', '😨'
    ],
    '手势': [
        '👍', '👎', '👏', '🙌', '👐', '🤲', '🤝', '🙏', '💪', '👌',
        '👈', '👉', '👆', '👇', '✌️', '🤞', '🤟', '🤘', '🤙', '👋'
    ],
    '符号': [
        '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '💔',
        '❣️', '💕', '💞', '💓', '💗', '💖', '💘', '💝', '💟', '☮️',
        '✝️', '☪️', '🕉️', '☸️', '✡️', '🔯', '🕎', '☯️', '☦️', '🛐'
    ],
    '动物': [
        '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯',
        '🦁', '🐮', '🐷', '🐸', '🐵', '🙈', '🙉', '🙊', '🐔', '🐧'
    ],
    '食物': [
        '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒',
        '🍑', '🥭', '🍍', '🥥', '🥝', '🍅', '🍆', '🥑', '🥦', '🥬'
    ]
};

// 所有表情的平铺数组，用于搜索
const emojis = Object.values(emojiCategories).flat();

// 最近使用的表情，最多存储10个
let recentEmojis = [];

// 从localStorage加载最近使用的表情
function loadRecentEmojis() {
    const saved = localStorage.getItem('recentEmojis');
    if (saved) {
        try {
            recentEmojis = JSON.parse(saved);
        } catch (e) {
            console.error('加载最近使用的表情失败:', e);
            recentEmojis = [];
        }
    }
}

// 保存最近使用的表情到localStorage
function saveRecentEmojis() {
    try {
        localStorage.setItem('recentEmojis', JSON.stringify(recentEmojis));
    } catch (e) {
        console.error('保存最近使用的表情失败:', e);
    }
}

// 添加表情到最近使用列表
function addToRecentEmojis(emoji) {
    // 如果表情已经在列表中，先移除它
    const index = recentEmojis.indexOf(emoji);
    if (index !== -1) {
        recentEmojis.splice(index, 1);
    }
    
    // 添加到列表开头
    recentEmojis.unshift(emoji);
    
    // 限制最多10个
    if (recentEmojis.length > 10) {
        recentEmojis.pop();
    }
    
    // 保存到localStorage
    saveRecentEmojis();
    
    // 更新最近使用的表情显示
    updateRecentEmojisDisplay();
}

// DOM元素
let emojiBtn;
let emojiPicker;
// 不再声明messageInput，因为它已在app.js中声明

// 初始化表情功能
function initEmoji() {
    emojiBtn = document.getElementById('emojiBtn');
    emojiPicker = document.getElementById('emojiPicker');
    // 不再重新获取messageInput元素，直接使用app.js中的常量
    // messageInput = document.getElementById('messageInput');
    
    // 加载最近使用的表情
    loadRecentEmojis();
    
    // 填充表情选择器
    populateEmojiPicker();
    
    // 添加表情按钮点击事件（移除旧的事件监听器，避免重复）
    emojiBtn.removeEventListener('click', emojiButtonClickHandler);
    emojiBtn.removeEventListener('click', toggleEmojiPicker); // 移除旧的事件监听器
    emojiBtn.addEventListener('click', emojiButtonClickHandler);
    
    // 点击其他地方关闭表情选择器
    document.removeEventListener('click', documentClickHandler);
    document.addEventListener('click', documentClickHandler);
    
    // 初始化键盘事件
    initKeyboardEvents();
}

// 文档点击事件处理函数
function documentClickHandler(e) {
    if (!emojiPicker.contains(e.target) && e.target !== emojiBtn) {
        emojiPicker.classList.remove('active');
    }
}
    
// 添加键盘事件监听器
function initKeyboardEvents() {
    setupKeyboardEvents();
}

// 设置键盘事件
function setupKeyboardEvents() {
    // 移除旧的事件监听器，避免重复
    document.removeEventListener('keydown', documentKeydownHandler);
    document.addEventListener('keydown', documentKeydownHandler);
    
    // 移除旧的事件监听器，避免重复
    emojiPicker.removeEventListener('keydown', emojiPickerKeydownHandler);
    emojiPicker.addEventListener('keydown', emojiPickerKeydownHandler);
}

// 文档键盘事件处理函数
function documentKeydownHandler(e) {
    // Alt + E 打开表情选择器
    if (e.altKey && e.key === 'e') {
        e.preventDefault(); // 阻止默认行为
        toggleEmojiPicker();
    }
    
    // Esc 关闭表情选择器
    if (e.key === 'Escape' && emojiPicker.classList.contains('active')) {
        emojiPicker.classList.remove('active');
    }
    
    // 数字键1-5快速切换表情分类
    if (emojiPicker.classList.contains('active') && !e.ctrlKey && !e.altKey && !e.shiftKey) {
        const key = e.key;
        if (/^[1-5]$/.test(key)) {
            e.preventDefault();
            const index = parseInt(key) - 1;
            const tabs = document.querySelectorAll('.emoji-tab');
            if (tabs.length > index) {
                const category = tabs[index].dataset.category;
                switchCategory(category);
            }
        }
    }
}

// 表情选择器键盘事件处理函数
function emojiPickerKeydownHandler(e) {
    if (emojiPicker.classList.contains('active')) {
        // 回车键选择当前焦点的表情
        if (e.key === 'Enter') {
            const focusedEmoji = document.querySelector('.emoji-item:focus');
            if (focusedEmoji) {
                e.preventDefault();
                insertEmoji(focusedEmoji.dataset.emoji, e);
            }
        }
        
        // 方向键导航
        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
            e.preventDefault(); // 阻止默认滚动行为
            
            const activeGrid = document.querySelector('.emoji-grid:not([style*="display: none"])');
            if (!activeGrid) return;
            
            const items = Array.from(activeGrid.querySelectorAll('.emoji-item'));
            if (items.length === 0) return;
            
            const currentIndex = items.findIndex(item => item === document.activeElement);
            const columns = 7; // 表情网格的列数
            let nextIndex;
            
            if (currentIndex === -1) {
                // 如果没有焦点元素，默认选择第一个
                nextIndex = 0;
            } else {
                // 根据方向键计算下一个索引
                switch (e.key) {
                    case 'ArrowUp':
                        nextIndex = currentIndex - columns;
                        if (nextIndex < 0) nextIndex = items.length - (items.length % columns) + currentIndex;
                        if (nextIndex >= items.length) nextIndex = items.length - 1;
                        break;
                    case 'ArrowDown':
                        nextIndex = currentIndex + columns;
                        if (nextIndex >= items.length) nextIndex = currentIndex % columns;
                        break;
                    case 'ArrowLeft':
                        nextIndex = currentIndex - 1;
                        if (nextIndex < 0 || Math.floor(nextIndex / columns) !== Math.floor(currentIndex / columns)) {
                            nextIndex = Math.floor(currentIndex / columns) * columns + columns - 1;
                            if (nextIndex >= items.length) nextIndex = items.length - 1;
                        }
                        break;
                    case 'ArrowRight':
                        nextIndex = currentIndex + 1;
                        if (nextIndex >= items.length || Math.floor(nextIndex / columns) !== Math.floor(currentIndex / columns)) {
                            nextIndex = Math.floor(currentIndex / columns) * columns;
                        }
                        break;
                }
            }
            
            // 设置焦点到下一个元素
            if (nextIndex >= 0 && nextIndex < items.length) {
                items[nextIndex].focus();
            }
        }
    }
}

// 填充表情选择器
function populateEmojiPicker() {
    // 清空选择器
    emojiPicker.innerHTML = '';
    
    // 添加表情选择器头部
    const header = document.createElement('div');
    header.className = 'emoji-picker-header';
    header.innerHTML = '单击插入表情，双击或按住Shift单击直接发送，按住Ctrl单击可连续插入<br>' + 
                      '<small>快捷键: Alt+E 打开/关闭, Esc 关闭, ↑↓←→ 导航, Enter 选择, 1-5 切换分类</small>';
    emojiPicker.appendChild(header);
    
    // 添加搜索框
    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.className = 'emoji-search';
    searchInput.placeholder = '搜索表情...';
    searchInput.addEventListener('input', function() {
        filterEmojis(this.value);
    });
    // 添加键盘事件处理
    searchInput.addEventListener('keydown', function(e) {
        // Tab键或向下箭头键，焦点移到第一个表情
        if ((e.key === 'Tab' && !e.shiftKey) || e.key === 'ArrowDown') {
            e.preventDefault();
            const firstEmoji = emojiPicker.querySelector('.emoji-item');
            if (firstEmoji) {
                firstEmoji.focus();
            }
        }
    });
    emojiPicker.appendChild(searchInput);
    
    // 当表情选择器打开时，自动聚焦到搜索框
    emojiBtn.removeEventListener('click', emojiButtonClickHandler);
    emojiBtn.addEventListener('click', emojiButtonClickHandler);

    
    // 创建最近使用的表情容器
    const recentContainer = document.createElement('div');
    recentContainer.id = 'recentEmojis';
    recentContainer.className = 'recent-emojis';
    emojiPicker.appendChild(recentContainer);
    
    // 更新最近使用的表情显示
    updateRecentEmojisDisplay();
    
    // 创建分类选项卡
    const tabsContainer = document.createElement('div');
    tabsContainer.className = 'emoji-tabs';
    emojiPicker.appendChild(tabsContainer);
    
    // 创建表情内容容器
    const contentContainer = document.createElement('div');
    contentContainer.className = 'emoji-content';
    emojiPicker.appendChild(contentContainer);
    
    // 添加分类选项卡
    Object.keys(emojiCategories).forEach((category, index) => {
        const tab = document.createElement('div');
        tab.className = 'emoji-tab';
        tab.textContent = category;
        tab.dataset.category = category;
        if (index === 0) tab.classList.add('active');
        tab.addEventListener('click', () => switchCategory(category));
        tabsContainer.appendChild(tab);
        
        // 为每个分类创建网格容器
        const categoryGrid = document.createElement('div');
        categoryGrid.className = 'emoji-grid';
        categoryGrid.dataset.category = category;
        categoryGrid.style.display = index === 0 ? 'grid' : 'none';
        contentContainer.appendChild(categoryGrid);
        
        // 添加该分类的表情
        emojiCategories[category].forEach(emoji => {
            const emojiItem = document.createElement('div');
            emojiItem.className = 'emoji-item';
            emojiItem.textContent = emoji;
            emojiItem.dataset.emoji = emoji;
            emojiItem.tabIndex = 0; // 使元素可以通过Tab键获取焦点
            emojiItem.addEventListener('click', (event) => insertEmoji(emoji, event));
            emojiItem.addEventListener('keydown', (event) => {
                // 按下回车键时插入表情
                if (event.key === 'Enter') {
                    insertEmoji(emoji, event);
                }
            });
            categoryGrid.appendChild(emojiItem);
        });
    });
}

// 切换表情分类
function switchCategory(category) {
    // 更新选项卡状态
    document.querySelectorAll('.emoji-tab').forEach(tab => {
        tab.classList.toggle('active', tab.dataset.category === category);
    });
    
    // 更新网格显示
    document.querySelectorAll('.emoji-grid[data-category]').forEach(grid => {
        grid.style.display = grid.dataset.category === category ? 'grid' : 'none';
        
        // 如果是当前选中的分类，滚动到该分类
        if (grid.dataset.category === category) {
            setTimeout(() => {
                const emojiContent = document.querySelector('.emoji-content');
                if (emojiContent) {
                    const gridTop = grid.offsetTop;
                    emojiContent.scrollTop = gridTop - 10; // 减去一点偏移量，使显示更美观
                }
            }, 0);
        }
    });
}

// 更新最近使用的表情显示
function updateRecentEmojisDisplay() {
    const recentContainer = document.getElementById('recentEmojis');
    if (!recentContainer) return;
    
    // 清空容器
    recentContainer.innerHTML = '';
    
    // 如果有最近使用的表情，显示标题
    if (recentEmojis.length > 0) {
        const title = document.createElement('div');
        title.className = 'recent-title';
        title.textContent = '最近使用';
        recentContainer.appendChild(title);
        
        // 创建最近使用的表情网格
        const recentGrid = document.createElement('div');
        recentGrid.className = 'recent-grid';
        recentContainer.appendChild(recentGrid);
        
        // 添加最近使用的表情
        recentEmojis.forEach(emoji => {
            const emojiItem = document.createElement('div');
            emojiItem.className = 'emoji-item';
            emojiItem.textContent = emoji;
            emojiItem.dataset.emoji = emoji;
            emojiItem.tabIndex = 0; // 使元素可以通过Tab键获取焦点
            emojiItem.addEventListener('click', (event) => insertEmoji(emoji, event));
            emojiItem.addEventListener('keydown', (event) => {
                // 按下回车键时插入表情
                if (event.key === 'Enter') {
                    insertEmoji(emoji, event);
                }
            });
            recentGrid.appendChild(emojiItem);
        });
    }
}

// 过滤表情
function filterEmojis(searchText) {
    searchText = searchText.toLowerCase();
    
    // 获取表情包选择器
    const packSelector = document.getElementById('emojiPackSelector');
    
    if (!searchText) {
        // 如果搜索框为空，恢复分类显示
        document.querySelector('.emoji-tabs').style.display = 'flex';
        document.querySelectorAll('.emoji-grid[data-category]').forEach(grid => {
            grid.style.display = grid.dataset.category === document.querySelector('.emoji-tab.active').dataset.category ? 'grid' : 'none';
        });
        
        // 显示表情包选择器
        if (packSelector) {
            packSelector.style.display = 'flex';
        }
        
        // 隐藏搜索结果网格
        const searchGrid = document.querySelector('.emoji-grid[data-search="true"]');
        if (searchGrid) {
            searchGrid.style.display = 'none';
        }
        return;
    }
    
    // 隐藏分类选项卡，显示搜索结果
    document.querySelector('.emoji-tabs').style.display = 'none';
    
    // 隐藏表情包选择器
    if (packSelector) {
        packSelector.style.display = 'none';
    }
    
    // 隐藏所有分类网格
    document.querySelectorAll('.emoji-grid[data-category]').forEach(grid => {
        grid.style.display = 'none';
    });
    
    // 创建或获取搜索结果网格
    let searchGrid = document.querySelector('.emoji-grid[data-search="true"]');
    if (!searchGrid) {
        searchGrid = document.createElement('div');
        searchGrid.className = 'emoji-grid';
        searchGrid.dataset.search = 'true';
        document.querySelector('.emoji-content').appendChild(searchGrid);
    }
    
    // 清空搜索结果
    searchGrid.innerHTML = '';
    searchGrid.style.display = 'grid';
    
    // 简单的表情搜索，根据表情符号的Unicode名称或描述进行匹配
    const emojiDescriptions = {
        // 表情
        '😀': 'smile grin happy face',
        '😁': 'grin beaming face with smiling eyes',
        '😂': 'laugh joy tears',
        '🤣': 'rofl rolling on the floor laughing',
        '😃': 'smile smiley',
        '😄': 'smile laugh',
        '😅': 'sweat smile',
        '😆': 'laughing satisfied',
        '😉': 'wink',
        '😊': 'blush',
        '😍': 'love heart eyes',
        
        // 手势
        '👍': 'thumbs up good like',
        '👎': 'thumbs down bad dislike',
        '👏': 'clap applause',
        '🙌': 'raised hands celebration',
        '👐': 'open hands',
        '🤲': 'palms up together',
        '🤝': 'handshake',
        '🙏': 'pray please thanks',
        '💪': 'muscle biceps strong',
        
        // 符号
        '❤️': 'heart love red',
        '🧡': 'orange heart',
        '💛': 'yellow heart',
        '💚': 'green heart',
        '💙': 'blue heart',
        '💜': 'purple heart',
        '🖤': 'black heart',
        '🤍': 'white heart',
        '🤎': 'brown heart',
        '💔': 'broken heart',
        
        // 动物
        '🐶': 'dog puppy',
        '🐱': 'cat kitten',
        '🐭': 'mouse',
        '🐹': 'hamster',
        '🐰': 'rabbit bunny',
        '🦊': 'fox',
        '🐻': 'bear',
        '🐼': 'panda',
        
        // 食物
        '🍎': 'apple red',
        '🍐': 'pear',
        '🍊': 'orange tangerine',
        '🍋': 'lemon',
        '🍌': 'banana',
        '🍉': 'watermelon',
        '🍇': 'grapes',
        '🍓': 'strawberry',
        
        // 可以添加更多表情的描述...
    };
    
    // 添加匹配的表情到搜索结果
    emojis.forEach(emoji => {
        const description = emojiDescriptions[emoji] || '';
        
        // 如果表情描述或表情本身包含搜索文本，则添加到搜索结果
        if (description.includes(searchText) || emoji.includes(searchText)) {
            const emojiItem = document.createElement('div');
            emojiItem.className = 'emoji-item';
            emojiItem.textContent = emoji;
            emojiItem.dataset.emoji = emoji;
            emojiItem.tabIndex = 0; // 使元素可以通过Tab键获取焦点
            emojiItem.addEventListener('click', (event) => insertEmoji(emoji, event));
            emojiItem.addEventListener('keydown', (event) => {
                // 按下回车键时插入表情
                if (event.key === 'Enter') {
                    insertEmoji(emoji, event);
                }
            });
            searchGrid.appendChild(emojiItem);
        }
    });
    
    // 如果没有搜索结果，显示提示
    if (searchGrid.children.length === 0) {
        const noResult = document.createElement('div');
        noResult.className = 'no-result';
        noResult.textContent = '没有找到匹配的表情';
        searchGrid.appendChild(noResult);
    }
}
 
 // 表情按钮点击处理函数
function emojiButtonClickHandler(e) {
    e.preventDefault();
    e.stopPropagation();
    toggleEmojiPicker(e);
}

// 切换表情选择器显示/隐藏
function toggleEmojiPicker(e) {
    if (e) e.stopPropagation();
    
    // 如果表情选择器已经激活，则隐藏它
    if (emojiPicker.classList.contains('active')) {
        emojiPicker.classList.remove('active');
        return;
    }
    
    // 激活表情选择器
    emojiPicker.classList.add('active');
    
    // 显示表情包选择菜单
    showEmojiPackSelector(e);
    
    // 自动聚焦到搜索框
    setTimeout(() => {
        const searchInput = emojiPicker.querySelector('.emoji-search');
        if (searchInput) {
            searchInput.focus();
        }
    }, 10);
}

// 显示表情包选择菜单
function showEmojiPackSelector(e) {
    // 创建表情包选择菜单
    let packSelector = document.getElementById('emojiPackSelector');
    
    // 如果菜单不存在，创建一个新的
    if (!packSelector) {
        packSelector = document.createElement('div');
        packSelector.id = 'emojiPackSelector';
        packSelector.className = 'emoji-pack-selector';
        
        // 添加标题
        const title = document.createElement('div');
        title.className = 'emoji-pack-title';
        title.textContent = '选择表情包';
        packSelector.appendChild(title);
        
        // 为每个表情分类创建一个选项
        Object.keys(emojiCategories).forEach(category => {
            const packOption = document.createElement('div');
            packOption.className = 'emoji-pack-option';
            
            // 添加表情示例作为图标
            const emojiSample = emojiCategories[category][0] || '';
            const emojiIcon = document.createElement('span');
            emojiIcon.className = 'emoji-pack-icon';
            emojiIcon.textContent = emojiSample;
            packOption.appendChild(emojiIcon);
            
            // 添加分类名称
            const categoryName = document.createElement('span');
            categoryName.className = 'emoji-pack-name';
            categoryName.textContent = category;
            packOption.appendChild(categoryName);
            
            packOption.dataset.category = category;
            
            // 点击选项时切换到对应的表情分类
            packOption.addEventListener('click', (event) => {
                event.stopPropagation();
                switchCategory(category);
                // 高亮当前选中的选项
                document.querySelectorAll('.emoji-pack-option').forEach(option => {
                    option.classList.toggle('active', option.dataset.category === category);
                });
                
                // 滚动到表情内容区域
                const emojiContent = document.querySelector('.emoji-content');
                if (emojiContent) {
                    emojiContent.scrollTop = 0;
                }
            });
            
            packSelector.appendChild(packOption);
        });
        
        // 将菜单添加到表情选择器中，放在搜索框之后
        const searchInput = emojiPicker.querySelector('.emoji-search');
        if (searchInput) {
            searchInput.parentNode.insertBefore(packSelector, searchInput.nextSibling);
        } else {
            emojiPicker.appendChild(packSelector);
        }
    } else {
        // 如果菜单已存在，确保它是可见的
        packSelector.style.display = 'flex';
    }
    
    // 获取当前激活的表情分类
    const activeTab = document.querySelector('.emoji-tab.active');
    if (activeTab) {
        const category = activeTab.dataset.category;
        switchCategory(category);
        
        // 高亮当前选中的选项
        document.querySelectorAll('.emoji-pack-option').forEach(option => {
            option.classList.toggle('active', option.dataset.category === category);
        });
    } else {
        // 如果没有激活的分类，默认选择第一个
        const firstTab = document.querySelector('.emoji-tab');
        if (firstTab) {
            const category = firstTab.dataset.category;
            switchCategory(category);
            
            // 高亮第一个选项
            const firstOption = document.querySelector('.emoji-pack-option');
            if (firstOption) {
                firstOption.classList.add('active');
            }
        }
    }
}

// 插入表情到输入框
function insertEmoji(emoji, event) {
    // 获取app.js中定义的messageInput元素
    const inputElement = document.getElementById('messageInput');
    const cursorPos = inputElement.selectionStart;
    const textBefore = inputElement.value.substring(0, cursorPos);
    const textAfter = inputElement.value.substring(cursorPos);
    
    inputElement.value = textBefore + emoji + textAfter;
    
    // 将光标位置设置到插入的表情之后
    const newCursorPos = cursorPos + emoji.length;
    inputElement.setSelectionRange(newCursorPos, newCursorPos);
    
    // 聚焦输入框
    inputElement.focus();
    
    // 添加到最近使用的表情
    addToRecentEmojis(emoji);
    
    // 如果用户按住了Shift键或者双击表情，则直接发送消息
    if (event && (event.shiftKey || event.detail === 2)) {
        // 触发发送按钮的点击事件
        document.getElementById('sendBtn').click();
    }
    
    // 如果用户按住了Ctrl键，则不关闭表情选择器，方便连续插入多个表情
    if (!(event && event.ctrlKey)) {
        // 关闭表情选择器
        emojiPicker.classList.remove('active');
    }
}

// 将消息中的表情符号转换为带有emoji类的span元素
function formatMessageWithEmojis(message) {
    // 创建一个临时的div元素来存放格式化后的消息
    const tempDiv = document.createElement('div');
    
    // 遍历消息中的每个字符
    let formattedMessage = '';
    for (let i = 0; i < message.length; i++) {
        const char = message[i];
        
        // 检查当前字符是否是表情符号
        if (isEmoji(char)) {
            formattedMessage += `<span class="emoji">${char}</span>`;
        } else {
            formattedMessage += char;
        }
    }
    
    tempDiv.innerHTML = formattedMessage;
    return tempDiv.innerHTML;
}

// 检查字符是否是表情符号
function isEmoji(char) {
    // 简单检查是否在我们的表情列表中
    return emojis.includes(char) || 
           // 或者使用正则表达式检查是否是Unicode表情符号
           /[\u{1F300}-\u{1F6FF}\u{1F900}-\u{1F9FF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}]/u.test(char);
}

// 导出函数供其他模块使用
window.emojiUtils = {
    initEmoji,
    formatMessageWithEmojis
};